<template>
    <el-row>
        <el-col :span="24" class="col"><el-button type="primary" @click="xinzeng">新增课程</el-button></el-col>

        <el-col :span="24" class="col">
            <el-table :data="areaList" border style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header" />
                <el-table-column prop="courseName" label="课程名称" align="center" label-class-name="header" />
                <el-table-column prop="courseDuration" label="课程时长" align="center" label-class-name="header" />
                <el-table-column prop="coursewareCount" label="课件数量" align="center" label-class-name="header" />
                <el-table-column prop="courseIntro" label="课程简介" align="center" label-class-name="header" />
                <el-table-column prop="targetAudience" label="适用人群" align="center" label-class-name="header" />
                <el-table-column prop="learningOutcomes" label="学习收获" align="center" label-class-name="header" />
                <el-table-column prop="subscription" label="订阅须知" align="center" label-class-name="header" />
                <el-table-column prop="readCount" label="阅读量" align="center" label-class-name="header" />
                <el-table-column prop="consultantId" label="咨询师ID" align="center" label-class-name="header" />
                <el-table-column prop="money" label="课程价格" align="center" label-class-name="header" />
                <el-table-column prop="image" label="课程图片" align="center" label-class-name="header" >
                    <template #default="scope">
                        <el-image style="width: 100px;" :src="scope.row.image" :fit="fit" />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="edite(item.row)">编辑</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table></el-col>

        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <EditeArea :form="form" @operate="operateAction" v-if="title == '编辑文章'" />
            <XinZeng v-if="title == '新增文章'" @operate="operateAction" />
        </el-dialog>
        <el-dialog v-model="shan" :title="title" width="380" destroy-on-close="true">
            <ShanChu v-if="title == '删除'" @operate="guanbi" :id="id" />
        </el-dialog>
    </el-row>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import EditeArea from './components/course/EditeArea.vue';
import XinZeng from './components/course/XinZeng.vue';
import ShanChu from './components/course/ShanChu.vue';
let res = null;
//定义小区列表数据
let areaList = ref([]);
let show = ref(false);
let shan = ref(false);
let title = ref("");
let id = ref({});
let form = ref({});

const edite = function (data) {
    console.log("----------");
    console.log(data);
    show.value = true;
    title.value = "编辑文章";
    form.value = data;
}
const xinzeng = function () {
    show.value = true;
    title.value = "新增文章";
}

const del = function (item) {
    id.value = { id: item.id };
    shan.value = true;
    title.value = "删除";
}

const guanbi = function () {
    shan.value = false;
}




const operateAction = async function (data) {
    if (data) {
        await axios.post("http://43.143.190.87:8091/panghudaojiaBackend/community/communityUpdate", {
            ...data
        });
        res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=1&pageSize=10&communityName=");
        console.log(res);
        areaList.value = res.data.data.list.map(item => {
            item.address = item.communityProvince + item.communityCity + item.communityDistrict;
            return item;
        });

    }
    show.value = false;
}

//组件首次挂载结束（通常代表组件首次加载）
onMounted(async function () {
    res = await axios.get("/api/course/findAll");
    console.log(res);
    areaList.value = res.data.data;
})
</script>

<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>